<template>
  <div class="project-create">
    <el-card class="box-card">
      <template #header>
        <div class="card-header flex items-center justify-between">
          <h2 class="text-xl font-bold">创建项目</h2>
        </div>
      </template>

      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="max-w-4xl">
        <!-- 基本信息 -->
        <h3 class="text-lg font-semibold mb-4">基本信息</h3>
        
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入项目名称" />
        </el-form-item>

        <el-form-item label="项目类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择项目类型" class="w-full">
            <el-option label="前端项目" :value="ProjectType.FRONTEND" />
            <el-option label="后端项目" :value="ProjectType.BACKEND" />
          </el-select>
        </el-form-item>

        <el-form-item label="项目描述" prop="description">
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入项目描述" />
        </el-form-item>

        <el-form-item label="代码仓库地址" prop="repository">
          <el-input v-model="form.repository" placeholder="请输入代码仓库地址" />
        </el-form-item>

        <!-- 项目文件部分已移除 -->

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">创建项目</el-button>
          <el-button @click="resetForm(formRef)">重置</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { ProjectType } from '@/model/project-model'
import { createProject } from '@/request/project-api'

defineOptions({
  name: 'ProjectCreate'
})

const router = useRouter()
const formRef = ref<FormInstance>()

// 表单数据
const form = reactive({
  name: '',
  type: ProjectType.FRONTEND,
  description: '',
  repository: ''
})

// 表单验证规则
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入项目名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度应为2到50个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择项目类型', trigger: 'change' }
  ],
  description: [
    { max: 500, message: '长度不能超过500个字符', trigger: 'blur' }
  ],
  repository: [
    { max: 200, message: '长度不能超过200个字符', trigger: 'blur' }
  ]
})

// 文件上传处理已移除

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        const response = await createProject(form)
        if (response.code === 0) {
          ElMessage.success('创建成功')
          router.push('/project/list')
        } else {
          ElMessage.error(response.errorMsg || '创建失败')
        }
      } catch (error) {
        console.error('创建项目失败:', error)
        ElMessage.error('创建项目失败')
      }
    } else {
      console.error('表单验证失败:', fields)
    }
  })
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 返回
const goBack = () => {
  router.push('/project/list')
}
</script>

<style scoped lang="scss">
.project-create {
  padding: 16px;
}
</style>
